<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>房屋信息发布</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="${request.contextPath}/favicon.ico">
    <link href="${request.contextPath}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${request.contextPath}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${request.contextPath}/css/animate.css" rel="stylesheet">
    <link href="${request.contextPath}/css/style.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" href="${request.contextPath}/plugins/bootstrap-fileinput/css/fileinput.min.css">
    <link href="${request.contextPath}/css/plugins/iCheck/custom.css" rel="stylesheet">
    <style>
        .ibox-border {
            border: 1px solid #39aef5;
        }
        .ibox-border > .ibox-content {
            padding-bottom: 0px;
            padding-top: 9px;
        }
        .form-control:focus,
        .single-line:focus {
            border-color: #0e9aef !important;
        }
        .checkbox-inline {
            line-height: 5px;
        }
        .list-group {
            margin-bottom: 0;
            margin-top: -5px;
        }
        .list-group > .list-group-item {
            border: none;
            padding: 8px 0;
            margin-left: 13px;
            margin-right: 13px;
            border-bottom: 1px dashed #b4afaf;
            margin-bottom: 0;
        }
        .list-group > .list-group-item:nth-last-child(1) {
            border-bottom: none;
        }
        .teacms-tags-list-group {
            list-style: none;
            padding-left: 0;
        }
        .teacms-tags-list-group li {
            display: inline-block;
            margin-bottom: 5px;
            border: 1px solid #ccc;
            padding: 3px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">

    <div class="ibox float-e-margins ibox-blue">
        <div class="ibox-title">
            <h5>房屋信息发布</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">
               <form id="addForm" autocomplete="off">
                   <div class="col-md-9" style="padding: 0">
                       <div class="form-group">
                           <label class="form-inline">房屋信息标题</label>
                           <input class="form-control" name="articleTitle" maxlength="100" placeholder="请输入房屋信息标题">
                       </div>

                       <div class="form-group">
                           <label class="form-inline">房屋信息内容</label>
                       <input id="articleContent" type="hidden" name="articleContent">
                       <div id="editor">

                       </div>
                       </div>

                       <div class="form-group" style="margin-top: 10px">
                           <input id="articleImg" type="hidden" name="articleImg">
                           <div class="file-loading">
                               <input id="fileUpload" type="file" name="file">
                           </div>
                       </div>

                   </div>

                   <div class="col-md-3 pr">
                       <div class="ibox float-e-margins ibox-blue ibox-border">
                           <div class="ibox-title">
                               类型
                           </div>
                           <div class="ibox-content">
                               <div class="form-group i-checks">
                                   <label><input type="radio" name="articleType" value="5" checked> 出租信息</label>
                                   &nbsp;&nbsp;&nbsp;
                                   <label><input type="radio" name="articleType" value="6"> 求租信息</label>
                               </div>
                               <div class="form-group i-checks">
                                   <label><input type="radio" name="articleType" disabled> 其它</label>
                                   &nbsp;&nbsp;&nbsp;
                                   <label><input type="radio" name="articleType" disabled> 关于我们</label>
                               </div>
                           </div>
                       </div>
                       <div class="ibox float-e-margins ibox-blue ibox-border">
                           <div class="ibox-title">
                               标签
                           </div>
                           <div class="ibox-content">
                               <div class="form-group i-checks">
                                   <ul class="teacms-tags-list-group">
                                       <#list tags as item>
                                       <li><label><input type="checkbox" name="tag" value="${item.id!}"> ${item.name!}</label></li>
                                       </#list>
                                   </ul>
                               </div>
                           </div>
                       </div>
                   </div>

                   <button type="submit" class="btn btn-primary btn-block">提交</button>
               </form>

            <div class="clearfix"></div>
        </div>
    </div>

</div>

<!-- 全局js -->
<script src="${request.contextPath}/js/jquery.min.js?v=2.1.4"></script>
<script src="${request.contextPath}/js/bootstrap.min.js?v=3.3.6"></script>
<!-- 自定义js -->
<script src="${request.contextPath}/js/content.js?v=1.0.0"></script>
<script src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script src="${request.contextPath}/plugins/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="${request.contextPath}/plugins/bootstrap-fileinput/js/locales/zh.js"></script>
<script src="${request.contextPath}/js/plugins/iCheck/icheck.min.js"></script>

<script type="text/javascript">
    $(function () {
        var E = window.wangEditor
        var editor = new E('#editor');
        editor.customConfig.uploadImgServer = '/admin/uploadwe';

        editor.customConfig.uploadFileName = 'file';

        editor.customConfig.uploadImgHeaders = {
            'enctype' : 'multipart/form-data'
        }

        editor.customConfig.zIndex = 100;
        // 或者 var editor = new E( document.getElementById('#editor') )
        editor.create();

        $("#fileUpload").fileinput({
            language: "zh",
            uploadUrl: '/admin/upload',
            browseClass: "btn btn-success",
            browseLabel: "上传预览图片",
            browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
            allowedFileExtensions: ['jpg', 'gif', 'png'],
            showUpload: false,
            dropZoneEnabled: true,
            showPreview: false,
            minFileCount: 1
        }).on("filebatchselected", function(event, files) {
            $(this).fileinput("upload");
        }).on("fileuploaded", function(event, data, previewId, index) {
            if (data.response.status) {
                $(".file-caption-name").text(data.response.filePath);
                $("#articleImg").val(data.response.filePath);
            } else {
                parent.layer.msg(data.response.msg, {time: 1500, icon:5});
            }
        });

        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });

        $("#addForm").submit(function (e) {
            e.preventDefault();

            var articleTitle = $("input[name='articleTitle']").val();
            console.log(articleTitle)
            if (articleTitle == null || articleTitle == "") {
                parent.layer.msg("请输入标题", {time: 1500, icon:5});
                return;
            }
            var articleImg = $("input[name='articleImg']").val();
            if (articleImg == null || articleImg == "") {
                parent.layer.msg("请上传预览图片", {time: 1500, icon:5});
                return;
            }

            $("#articleContent").val(editor.txt.html());
            $.ajax({
                url: "/admin/article/addArticle",
                data:  $("#addForm").serialize(),
                type: "POST",
                dataType: 'json',
                success: function(data){
                    if (data.success) {
                        parent.layer.msg(data.msg, {icon: 1});
                        window.location.reload();
                    }
                }
            });
        })
    })


</script>
</body>
</html>